<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			
			<view class="cu-list menu">
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">实发工资</text>
					</view>
					<view class="action">
						<input class="input" type="number" :maxlength="10" v-model="realPay"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">工伤缴纳基数</text>
					</view>
					<view class="action">
						<input class="input" type="number" :maxlength="10" v-model="basePay"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="text-grey">性别</text>
					</view>
					<view class="action">
						<picker @change="sexChange" :value="sexIndex" :range="sexPicker">
							<view class="picker input">
								{{sexIndex>-1?sexPicker[sexIndex]:'请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">员工年龄</text>
					</view>
					<view class="action">
						<input class="input" type="number" :maxlength="10" v-model="age"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="text-grey">是否安排工作</text>
					</view>
					<view class="action">
						<picker @change="workChange" :value="workIndex" :range="workPicker">
							<view class="picker input">
								{{workIndex>-1?workPicker[workIndex]:'请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">伤残等级(1-10)</text>
					</view>
					<view class="action">
						<input class="input" type="number" :maxlength="4" v-model="level"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				
				<view class="cu-item bottom">
					<view class="content">
						<view class="cu-btn round bg-blue" @tap="goPage('/pages/tabbar/tabbar-2/injuryResult')">查看测算结果</view>
					</view>
				</view>
			</view>

		</scroll-view>
	<!-- 绑定 -->
	<goReg 
		ref="goReg" 
		:contentHeight="580"
	></goReg>
	</view>
</template>

<script>
	import goReg from "@/components/goReg";
	export default {
		components: {
			goReg,
		},
		data() {
			return {
				// cityPickerValueDefault: [0, 0, 1],
				// pickerText: '',
				// areaCompare:'请选择',
				// area:'请选择',
				// areaIndex:0,
				sexIndex:-1,
				sexPicker: ['男', '女'],
				workIndex:-1,
				workPicker: ['是','否'],
				basePay:'',
				realPay:'',
				age:'',
				level:'',
				resultData:'',
				modalName: null,
			};
		},
		methods: {
			goPage(page){
				// let uId = uni.getStorageSync('userId');
				let uId =1
				if(uId>"0"&&uId!=undefined){
					let errMsg = '';
					if(this.sexIndex<0)errMsg = '请选择员工性别';
					if(this.workIndex<0)errMsg = '请选择是否安排工作';
					if(this.level<=0)errMsg = '请填写伤残等级';
					if(this.age<=0)errMsg = '请填写员工年龄';
					if(this.basePay<=0)errMsg = '请填写工伤缴纳基数';
					if(this.realPay<=0)errMsg = '请填写实发工资';
					if(errMsg){
						uni.showToast({
							title:errMsg,
							icon:'none',
						});
						return;
					}
					
					uni.setStorageSync('injuryParam',{wages:this.realPay,injury_base:this.basePay,gender:parseInt(this.sexIndex)+1,age:this.age,
					work:parseInt(this.workIndex)+1,level:this.level});
					uni.navigateTo({
						url: page
					})
					return;
				}
				
				this.$refs.goReg.showModal('regModal');	
				return;
				
			},
			sexChange(e) {
				this.sexIndex = e.detail.value
			},
			workChange(e) {
				this.workIndex = e.detail.value
			},
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
		background: #FFF;
		
		
	}
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 0;
	}
	.page.show {
		overflow: hidden;
	}
	.input{
		text-align: right;
		font-size: 12px;
	}
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
